<template>
    <views>
        <div class="enterprise_office_sign" ref="enterprise_office_sign">
             <viewTitle :title="'人员签约记录'" :border="true"> </viewTitle>
             <div class="tables">
             <div :class="search_list1">
             <!-- 人员编号 -->
             <div class="serial_number flex flexR center">
                <div class="input-title Textl">人员编号:</div>
               <el-input v-model="form.serial_number" placeholder="人员编号"  :clearable="true"></el-input>
             </div>
             <!-- 创建时间 -->
             <div class="creation_time flex flexR center">
                 <div class="input-title Textl">创建时间:</div>
                   <el-date-picker
                    v-model="form.creation_time"
                    type="datetimerange"
                    align="right"
                    :default-time="['0:00:00','23:59:59']"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                  </el-date-picker>
             </div>
             <!-- 签约服务商 -->
             <div class="sign_servicer flex flexR center">
                 <div class="input-title Textl">签约服务商:</div>
                 <el-select v-model="form.sign_servicer" clearable placeholder="请选择">
                  <el-option
                    v-for="item in form.sign_servicer_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
             </div>
             <!-- 签约状态 -->
             <div class="contract_status flex flexR center" :style="{marginLeft:marginLeft+'px'}">
                  <div class="input-title Textl">签约状态:</div>
                  <el-select v-model="form.contract_status" clearable placeholder="请选择">
                  <el-option
                    v-for="item in form.contract_status_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
             </div>
             </div>
             <!-- 关键字  查询 重置  导出列表 -->
             <div :class="search_list2">
               <div class="name_phone_card flex flexR center">
                  <div class="input-title Textl">关键字:</div>
                    <el-input v-model="form.serial_number" placeholder="请输入姓名/手机号/身份证号/银行卡号"  :clearable="true"></el-input>
                  </div>
                  <div class="name_phone_card_btn flex flexR  flexJp">
                    <el-button type="primary">查询</el-button>
                    <el-button type="danger">重置</el-button>
                    <el-button type="primary" :style="{width:140+'px'}"  size="medium"  icon="el-icon-download"  >导出列表</el-button>
                  </div>
                </div>
             </div>
             <el-table
                border
                :data="tableData"
                style="width: 100%;max-width:none;"
                :header-cell-style="getRowClass"
                :select-on-indeterminate="true"
                :fit="true"
                :lazy="true"
                @row-click="clickRow"
                max-height="450">
                <el-table-column
                fixed
                prop="date"
                label="序号"
                width="100">
                </el-table-column>
                <el-table-column
                fixed
                prop="name"
                label="编号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="province"
                label="姓名"
                width="120">
                </el-table-column>
                <el-table-column
                prop="city"
                label="身份证"
                width="120">
                </el-table-column>
                <el-table-column
                prop="address"
                label="银行卡号"
                width="300">
                </el-table-column>
                <el-table-column
                prop="zip"
                label="预留手机号码"
                width="120">
                </el-table-column>
                       <el-table-column
                prop="date"
                label="签约服务商"
                width="150">
                </el-table-column>
                <el-table-column
                prop="name"
                label="签约编号"
                width="120">
                </el-table-column>
                <el-table-column
                prop="province"
                label="开始日期"
                width="120">
                </el-table-column>
                <el-table-column
                prop="city"
                label="终止日期"
                width="120">
                </el-table-column>
                <el-table-column
                prop="address"
                label="状态"
                width="300">
                </el-table-column>
                <el-table-column
                prop="zip"
                label="创建时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="zip"
                label="操作"
                 fixed="right"
                width="200">
                <div class="table_operation">
                    <div>操作</div>
                    <div>操作</div>
                </div>
                </el-table-column>
            </el-table>
            <div class="pagination_num flex flexR center flexJp">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="1000">
                </el-pagination>
            </div>
          </div>
    </views>
</template>


<script>
export default {
       name:"signing",
       data(){
            return  {
                form: {
                  serial_number: '',                     // 人员编号
                  creation_time:'',                      // 创建时间
                  sign_servicer_list:[{ value: '选项1',label: '黄金糕'}],                 // 签约服务商列表
                  sign_servicer:'',                      // 签约服务商
                  contract_status_list:[{ value: '选项1',label: '黄金糕'}],             // 签约状态列表
                  contract_status:'',                    // 签约状态
                },
                marginLeft:0,
                search_list2:['flex','flexR','search_list2'],
                search_list1:['flex','flexR','search_list2'],
                pickerOptions: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
                tableData: [{
                  date: '2016-05-03',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-02',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-04',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-08',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-06',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }, {
                  date: '2016-05-07',
                  name: '王小虎',
                  province: '上海',
                  city: '普陀区',
                  address: '上海市普陀区金沙江路 1518 弄',
                  zip: 200333
                }]
            }
       },
       methods:{
               //    修改第一行样式
               getRowClass({ row, column, rowIndex, columnIndex }) {
                        if (rowIndex === 0) {
                            return "background: #FAFAFA ";
                        } else {
                            return "";
                        }
                },
              //     点击单行
              clickRow(row, column, event){
                        console.log(row, column, event)
              },
              //    修改是否换行
              changeStyleRow(width){
                  let _width  = width-290-350-300-50-25;
                  console.log("剩余宽度",_width)
                  if(_width>300){
                       this.marginLeft=25;
                       console.log("进入1")
                       console.log(this.marginLeft)
                  }else{
                       this.marginLeft=0
                        console.log("进入2")
                  }
              }
       },
       mounted(){
              this.changeStyleRow(this.$refs.enterprise_office_sign.clientWidth )
       }
}
</script>



<style lang="less" :scope="true">
.enterprise_office_sign{
    padding: 20px;
    background: #ffffff;
    .serial_number{
      width: 290px;
    }
    .creation_time,.sign_servicer,.contract_status{
      margin-left: 25px;
    }
    .creation_time{
      width: 350px;
    }
    .sign_servicer,.contract_status{
      width: 300px;
    }
    .search_list1{
      min-height: 100px;
      flex-wrap: wrap;
    }
    .search_list2{
      height: auto;
      margin-bottom: 25px;
    }
    .input-title{
        width: 85px;
        font-size: 15px;
    }
    .name_phone_card{
        width: 370px;
    }
    .name_phone_card_btn{
      width: 400px;
      margin-left: 25px;
    }
    .tables{
      margin-top: 25px;
    }
    .pagination_num{
      height: 120px;
    }
}


</style>